<template>
  <div ref="purcle" class="purcle">
    购买终端
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {

    }
  },
  computed: {

  },
  created() {

  },
  mounted() {
    var myChart = echarts.init(this.$refs.purcle, 'dark')
    var option = {
      tooltip: {
        formatter: '{b}数量: {c}个;占比({d}%)',
        backgroundColor: 'rgba(0,0,0,0.9)',
        borderColor: 'rgba(0,0,0,0.9)',
        textStyle: {
          color: '#fff'
        }

      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [50, 75],
          center: ['50%', '50%'],
          roseType: 'area',
          // itemStyle 全局的颜色
          // itemStyle: {
          //   borderRadius: 0,
          //   color: {
          //     type: 'linear',
          //     x: 0,
          //     y: 0,
          //     x2: 0,
          //     y2: 1,
          //     colorStops: [{
          //       offset: 0, color: '#2f2971' // 0% 处的颜色
          //     }, {
          //       offset: 1, color: '#4d4cdc' // 100% 处的颜色
          //     }],
          //     global: false // 缺省为 false
          //   }
          // },
          data: [
            { value: 25, name: 'Android',
              label: {
                color: '#4446ca'
              },
              // itemStyle  局部样式
              itemStyle: {
                borderRadius: 0,

                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#2f2971' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#4d4cdc' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }},
            { value: 20, name: 'IOS' },
            { value: 15, name: 'PC Web' },
            { value: 5, name: 'Wap Web' }
          ]
        }
      ]
    }
    myChart.setOption(option)
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
.purcle{
  width: 100%;
  height: 100%;
}
</style>
